/*
 * @Author: wpp 906008377@qq.com
 * @Date: 2025-04-01 10:05:44
 * @LastEditors: wpp 906008377@qq.com
 * @LastEditTime: 2025-04-01 10:10:53
 * @FilePath: \vue-project\src\views\types\test.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

/* eslint-disable */

export interface Test {
  name?: string
}

// https://www.typescriptlang.org/docs/

// ts基础------------------------------------------------------------------------------------------
// 你可以通过添加 // @ts-nocheck 注释来忽略类型检查
// 你还可以使用 // @ts-ignore 来忽略本行的错误。
// 你可以通过去掉 --checkJs 设置并添加一个 // @ts-check 注释来选则检查某些.js文件。

// boolean number string [] Tuple enum any void null undefined never unknown symbol
// 交叉类型 &
// 联合类型 |
// interface -- 接口
// type -- 类型别名
// keyof -- 索引类型查询操作符
// typeof -- 获取类型的类型
// Array[number]  -- 数组元素类型
// 泛型<T>
// 类型断言(as) 非空断言操作符(!.)
// extends -- 泛型继承
// in -- 映射类型
// Exclude<T, U> -- 从T中剔除可以赋值给U的类型。
// Extract<T, U> -- 提取T中可以赋值给U的类型。
// NonNullable<T> -- 从T中剔除null和undefined。
// ReturnType<T> -- 获取函数返回值类型。
// InstanceType<T> -- 获取构造函数类型的实例类型。
// Partial<Type> -- 将类型的所有属性设置为可选。
// Required<Type> -- 将类型的所有属性设置为必填。
// Readonly<Type> -- 将类型的所有属性设置为只读。
// Record<Keys, Type> -- 构造一个对象类型，属性键为Keys，属性值为Type。
// Pick<Type, Keys> -- 从Type中选择一组属性Keys，构造一个新的类型。
// Omit<Type, Keys> -- 从Type中剔除Keys属性，构造一个新的类型。
// ThisType<Type> -- 用于在对象字面量中指定this类型。
// OmitThisParameter<Type> -- 删除函数类型的this参数。
// ThisParameterType<Type> -- 获取函数类型的this参数类型。
// NoInfer<Type> -- 用于禁用类型推断。
// ConstructorParameters<Type> -- 获取构造函数参数类型。
// Parameters<Type> -- 获取函数参数类型。
// infer -- 用于在条件类型中推断类型变量。

// 交叉类型 联合类型

type type1 = {
  name: string
}

type type2 = {
  age: number
  sex?: boolean
}

// 交叉
type type3 = type1 & type2
const obj: type3 = {
  name: '123',
  age: 123
}

//  联合
type type4 = type1 | type2
const obj1: type4 = {
  name: '123',
  age: 123
}

if ('age' in obj1) {
  obj1.age
}

// enum => 联合类型
// enum 的使用
const getEnumType1 = (type: enumType1) => {}
// 等同
const getEnumType = (type: 'UP' | 'DOWN' | 'LEFT' | 'RIGHT') => {}

// Object => 联合类型
const objData = {
  admin: '管理员',
  user: '用户',
  student: '学生',
  teacher: '老师'
}
type objDataType = keyof typeof rolesObj

// 数组 =》 联合类型
const mapTypeList = ['continent', 'country', 'province'] as const
type mapType = (typeof mapTypeList)[number]

// 数字枚举
enum enumType {
  Up = 1,
  Down,
  Left,
  Right
}

// 字符串枚举
enum enumType1 {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

// 混合枚举
enum enumType2 {
  No = 0,
  Yes = 'YES'
}

// 非空断言操作符 !.
const objTs = { prop: 123 }
// 这个操作符告诉TypeScript编译器你确定该表达式绝对不会为null或undefined
objTs!.prop

// interface 与 keyof 连用
interface TestInterface {
  name: string
  age: number
}
type TestInterfaceType = keyof TestInterface

// type 与 keyof 连用
type TestType = {
  name: string
  age: number
}
type TestTypeType = keyof TestType

// obj 的 valueOf   arr 的 valueOf
type valueOf<T> = T[keyof T]

type arrayValueof<T extends readonly any[]> = T[number]

// 有 as const 的

// Object
const ObjHasAsConst = {
  name: 'wpp',
  age: 18
} as const

type valueOfType = valueOf<typeof ObjHasAsConst>

type keyOfType = keyof typeof ObjHasAsConst

type typeofType = typeof ObjHasAsConst

// Array
const ArrHasAsConst = [1, '2', true] as const

type arrayValueType = arrayValueof<typeof ArrHasAsConst>

type arrayNumberType = (typeof ArrHasAsConst)[number]

// 没有 as const 的

// Object
const ObjNoHasAsConst = {
  name: 'wpp',
  age: 18
}

type valueOfType1 = valueOf<typeof ObjNoHasAsConst>

type keyOfType1 = keyof typeof ObjNoHasAsConst

type typeofType1 = typeof ObjNoHasAsConst

// Array
const ArrNoHasAsConst = [1, '2', true]

type arrayValueType1 = arrayValueof<typeof ArrNoHasAsConst>

type arrayNumberType1 = (typeof ArrNoHasAsConst)[number]

// in  in 与 keyof 连用

const rolesObj = {
  admin: '管理员',
  user: '用户',
  student: '学生',
  teacher: '老师'
}

type roles0 = keyof typeof rolesObj

type roles = 'admin' | 'user' | 'student' | 'teacher'

type roleType = {
  [a in roles]: string
}
type roleType1 = {
  [a in keyof typeof rolesObj]: string
}

// 相当于
type roleType2 = {
  admin: string
  user: string
  student: string
  teacher: string
}

// typeof keyof 连用
const person = {
  name: 'Rock',
  age: 19,
  gender: false,
  action: () => {
    console.log('hello')
  }
}

type personTypeOf = typeof person

type personType = keyof typeof person

// 相当于
type personType1 = 'gender' | 'name' | 'action' | 'age'

// 定义一个类型，如果是数组类型，那就返回数组元素的类型，否则传入什么类型就返回什么类型
const arr = [1, '2', true]

// 不使用 infer 关键字
type arrItemType<T> = T extends Array<any> ? T[number] : T
type arrItem = arrItemType<typeof arr>

// 使用 infer 关键字    使用 infer 推断 数组元素的类型 并把结果赋给 U
type arrItemTypeInfer<T> = T extends Array<infer U> ? U : T
type arrItemInfer = arrItemTypeInfer<typeof arr>

type arrtype = [1, '2', true]

// 使用 infer 关键字 获取元组的第一个类型

type arrOneTypeInfer<T> = T extends [infer U1, ...any[]] ? U1 : T
type arrOneInfer = arrOneTypeInfer<arrtype>

// 使用 infer 关键字 剔除元组的最后一个类型
type arrPopTypeInfer<T> = T extends [...infer U, unknown] ? U : T
type arrPopInfer = arrPopTypeInfer<arrtype>

// Partial<Type>
// 构造一个类型，并将 Type 的所有属性都设置为可选。此实用程序将返回一个表示给定类型的所有子集的类型。
interface particalInterface {
  title: string
  description?: string
}

type particalType = Partial<particalInterface>

// Required<Type>
// 与 Partial 相反

type requiredType = Required<particalInterface>

// Readonly<Type>
// 构造一个类型，将 Type 的所有属性设置为只读，这意味着属性不能被重新分配。

type readonlyType = Readonly<particalInterface>

// Record<Keys, Type>
// 构造一个对象类型，其属性键为 Keys，属性值为 Type。
type keyType = 'a' | 'b' | 'c'
interface valueInterface {
  name: string
  age: number
}
type recordType = Record<keyType, valueInterface>

// Pick<Type, Keys>
// 从 Type 中选择一组属性 Keys。
interface pickInterface {
  a: string
  b: number
  c: boolean
}
type pickKeys = 'a' | 'b'
type pickType1 = Pick<pickInterface, pickKeys>

// Omit<Type, Keys>
// 从 Type 中选择所有属性，然后删除 Keys。
type omitType = Omit<pickInterface, 'a'>

type A = 'banana' | 'orange' | 'apple'
type B = 'apple'
type AA =
  | { kind: 'circle'; radius: number }
  | { kind: 'square'; x: number }
  | { kind: 'triangle'; x: number; y: number }

// Exclude<A, B>
// 从类型A中排除类型B ‘banana’| ‘orange’
type C = Exclude<A, B>

type E = Exclude<AA, { kind: 'circle' }>

// Extract<A, B>
// 从类型A中找到B共有的属性 ‘apple’
type D = Extract<A, B>
type F = Extract<AA, { kind: 'circle' }>

// NonNullable<Type>
// 从类型A中排除null和undefined
type G = NonNullable<string | number | undefined | null>

// ReturnType<Type>
type H = ReturnType<() => string>
type I = ReturnType<<T>() => T>

// InstanceType<Type>
// 从构造函数类型中提取实例类型。
class CLassType {
  x = 0
  y = 0
}
type J = InstanceType<typeof CLassType>

// ThisType<Type>
// OmitThisParameter<Type>
// ThisParameterType<Type>
// NoInfer<Type>
// ConstructorParameters<Type>
// Parameters<Type>

// javascript-------------------------------------------------------------------------------------
type eventType = keyof WindowEventMap

// Vue--------------------------------------------------------------------------------------------
import AboutView from '../AboutView.vue'
type AboutViewInstance = InstanceType<typeof AboutView>

import type { CSSProperties } from 'vue'
const styleType: CSSProperties = {
  width: '100px',
  height: '200px'
}

/* eslint-enable */
